<template>
  <div class="content">
    <el-breadcrumb separator="/">
      <el-breadcrumb-item class="el-bread-one" style="color: red"
        >仓库管理</el-breadcrumb-item
      >
      <el-breadcrumb-item>盘点填写</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="context">
      <div class="left">
        <div class="top">盘点单</div>
        <div class="tableBorder">
          <div class="title">
            <span>盘点编号：{{ table.oddNumber }}</span>
            <span>
              <span style="margin-right: 20px"
                >申请人：{{ table.createdByName }}
              </span>
              <span> 创建时间：{{ $moment(table.createdTime) }}</span>
            </span>
          </div>
          <el-table
            @row-click="rowClick"
            ref="multipleTable"
            @selection-change="selectChange"
            :data="table.goodsList"
          >
            <el-table-column type="selection" width="55"></el-table-column>
            <el-table-column
              type="index"
              width="50"
              label="序号"
            ></el-table-column>
            <el-table-column label="商品信息" prop="title"></el-table-column>
            <el-table-column label="实际库存" prop="warCount">
              <template slot-scope="scope">
                {{ inventoryCount(scope.row) }}
              </template>
            </el-table-column>
            <el-table-column label="盘点库存" v-if="obj.isFp != 1">
              <template slot-scope="scope">
                {{ scope.row.warNames ? scope.row.warNames : "--" }}
              </template>
            </el-table-column>
            <el-table-column
              :label="
                table.goodsList[0] && table.goodsList[0].checkNumberDetails
                  ? '复盘' + table.goodsList[0].checkNumberDetails.length
                  : '初盘库存'
              "
              v-if="obj.isFp == 1"
            >
              <template slot-scope="scope">
                {{ scope.row.realTimeQuantityCopy }}
              </template>
            </el-table-column>
            <el-table-column label="差异">
              <template slot-scope="scope">
                {{
                  scope.row.realTimeQuantity
                    ? scope.row.realTimeQuantityCopy -
                      scope.row.realTimeQuantity
                    : "--"
                }}
              </template>
            </el-table-column>
            <el-table-column
              label="盘点仓库"
              v-if="obj.isFp != 1"
              prop="createdByName"
            >
              <template slot-scope="scope">
                <span
                  v-for="item in scope.row.warehouses"
                  :key="item.warId"
                  v-if="!item.type"
                >
                  {{ item.warName }}
                </span>
              </template>
            </el-table-column>
            <el-table-column label="盘点人" v-else>
              <template slot-scope="scope">
                {{
                  preparedData.find((res) => res.label == scope.row.checkerId)
                    ? preparedData.find(
                        (res) => res.label == scope.row.checkerId
                      ).value
                    : "--"
                }}
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <div class="right">
        <div class="title">
          <span>操作</span>
        </div>
        <el-form
          v-if="selectObj.id || selectObj.goodsId || selectArray.length > 1"
          ref="form"
          :model="form"
          label-width="80px"
        >
          <el-form-item
            v-if="
              (selectObj.id || selectObj.goodsId) && selectArray.length <= 1
            "
            label="商品名称"
          >
            <el-input
              size="small"
              disabled
              :value="
                selectObj.goodsName ? selectObj.goodsName : selectObj.title
              "
            ></el-input>
          </el-form-item>
          <el-form-item label="盘点仓库" v-if="obj.isFp != 1">
            <el-select
              clearable
              v-if="obj.isFp != 1"
              @change="selectChangeList"
              value-key="warId"
              multiple
              size="small"
              v-model="form.selectWar"
              placeholder="请选择"
            >
              <el-option
                v-for="item in form.warArray"
                :key="item.warId"
                :label="item.warName"
                :value="item"
              >
              </el-option>
            </el-select>

            <el-input
              v-else
              size="small"
              disabled
              :value="selectObj.warNames"
            ></el-input>
          </el-form-item>
          <el-form-item
            label="实际库存"
            v-if="
              (selectObj.id || selectObj.goodsId) &&
              selectArray.length <= 1 &&
              obj.isFp == 1
            "
          >
            <el-input
              size="small"
              disabled
              :value="selectObj.realTimeQuantity"
            ></el-input>
          </el-form-item>
          <el-form-item label="盘点库存" v-if="obj.isFp == 1">
            <div
              style="
                display: flex;
                justify-content: space-between;
                align-items: center;
                flex-wrap: wrap;
              "
            >
              <el-input-number
                style="width: 170px"
                size="small"
                v-if="
                  (selectObj.id || selectObj.goodsId) && selectArray.length <= 1
                "
                v-model="selectObj.realTimeQuantityCopy"
                :min="0"
              ></el-input-number>
              <div style="display: flex">
                <span style="margin-right: 10px">盘点人</span>
                <el-select
                  v-if="
                    (selectObj.id || selectObj.goodsId) &&
                    selectArray.length <= 1
                  "
                  clearable
                  style="width: 150px"
                  size="small"
                  v-model="selectObj.checkerId"
                  placeholder="请选择盘点人姓名"
                >
                  <el-option
                    v-for="item in preparedData"
                    :key="item.label"
                    :label="item.value"
                    :value="item.label"
                  ></el-option>
                </el-select>
                <el-select
                  v-else
                  style="width: 170px"
                  size="small"
                  clearable
                  v-model="checkerId"
                  @change="test"
                  placeholder="请选择制单人姓名"
                >
                  <el-option
                    v-for="item in preparedData"
                    :key="item.label"
                    :label="item.value"
                    :value="item.label"
                  ></el-option>
                </el-select>
              </div>
            </div>
          </el-form-item>
        </el-form>
        <div class="nodate" v-else>
          <img src="@/assets/kong.png" alt="" />
          <span>请选择左侧信息</span>
        </div>
      </div>
    </div>
    <div style="height: 50px"></div>
    <div class="submit">
      <el-button size="mini" @click="$router.go(-1)">取消</el-button>
      <el-button
        v-if="obj.isFp"
        size="mini"
        style="color: #4168e7; border: 1px solid #4168e7"
        @click="addCheck(3)"
        >完成</el-button
      >
      <el-button size="mini" type="primary" @click="addCheck(1)">{{
        obj.isFp == 1 ? "保存" : "添加"
      }}</el-button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      checkerId: "",
      obj: this.$route.query.obj ? JSON.parse(this.$route.query.obj) : null,
      table: {
        goodsList: [],
      },
      selectObj: {},
      selectArray: [],
      preparedData: [],
      form: {
        selectWar: [],
        warArray: [],
      },
      cart: JSON.parse(localStorage.getItem("cart")),
    };
  },
  activated() {
    if (this.$route.query.obj && JSON.parse(this.$route.query.obj).isHc) {
      this.axios
        .get("/order/stockControl/checkerList", {
          headers: {
            isLoading: false,
          },
        })
        .then((res) => {
          if (res.code == 0) {
            this.preparedData = res.data;
          } else {
            this.$message.error(res.message);
          }
        });
      this.obj = JSON.parse(this.$route.query.obj);
      this.getList();
    }
  },
  methods: {
    test(e) {
      this.selectArray.forEach((res) => {
        this.$set(res, "checkerId", e);
      });
    },
    rowClick(e) {
      this.selectArray = [];
      this.selectArray.push(e);
      this.form.selectWar = [];
      this.form.warArray = e.warehouses;
      this.$set(this, "selectObj", e);
    },
    selectChange(e) {
      this.$set(this, "selectObj", {});
      this.selectArray = e;
      if (!this.obj.isFp) {
        this.form.warArray = [];
        this.form.selectWar = [];
        this.selectArray.forEach((currentItem) => {
          if (currentItem.warehouses) {
            currentItem.warehouses.forEach((currentTemp) => {
              if (
                !this.form.warArray.find(
                  (res) => res.warId == currentTemp.warId
                )
              ) {
                this.form.warArray.push(
                  JSON.parse(JSON.stringify(currentTemp))
                );
              }
            });
          }
        });
      }
    },
    getList() {
      let obj = JSON.parse(this.$route.query.obj);
      if (obj.isFp == 1) {
        this.selectObj = {};
        this.axios
          .get("/order/stockControl/checkDetails?oddNumber=" + obj.oddNumbers, {
            headers: {
              isLoading: false,
            },
          })
          .then((res) => {
            if (res.code == 0) {
              this.table = res.data;
              this.$set(this.table, "goodsList", this.table.goods);
              this.$set(this.table, "oddNumber", this.table.oddNumbers);
              this.$set(this.table, "createdByName", this.table.proposerName);
              this.table.goodsList.forEach((currentItem) => {
                // if (currentItem.warehouses) {
                //   currentItem.warehouses.forEach((currentTemp) => {
                //     currentTemp.type = 0;
                //   });
                // }
                this.$set(currentItem, "checkerId", "");
                this.$set(
                  currentItem,
                  "realTimeQuantityCopy",
                  currentItem.realTimeQuantity
                );
                this.$set(currentItem, "title", currentItem.goodsName);
              });
            } else {
              this.$message.error(res.message);
            }
          });
      } else {
        this.axios
          .post("/order/stockControl/fillInAllotNumber", {
            gids: obj.gids,
            gtype: obj.gType,
            type: obj.type,
          })
          .then((res) => {
            if (res.code == 0) {
              this.table = res.data;
              this.table.goodsList.forEach((currentItem) => {
                if (currentItem.warehouses) {
                  currentItem.warehouses.forEach((currentTemp) => {
                    currentTemp.type = 0;
                  });
                }
              });
            } else {
              this.$message.error(res.message);
            }
          });
      }
    },
    selectChangeList(e) {
      this.selectArray.forEach((currentItem) => {
        if (currentItem.warehouses) {
          currentItem.warehouses.forEach((currentTemp) => {
            if (!e.find((res) => res.warId == currentTemp.warId)) {
              this.$set(currentTemp, "type", 1);
            } else {
              this.$set(currentTemp, "type", 0);
            }
          });
        }
        this.$set(
          currentItem,
          "warehouses",
          JSON.parse(JSON.stringify(currentItem.warehouses))
        );
      });
    },
    moreDelect() {
      let gids = JSON.parse(this.$route.query.obj).gids;

      for (let i = 0; i < gids.length; i++) {
        if (JSON.parse(this.$route.query.obj).gType == "1") {
          if (
            this.cart.goodList.find(
              (res) => res.id == JSON.parse(this.$route.query.obj).gids[i]
            )
          ) {
            this.cart.goodList = this.cart.goodList.filter(
              (res) => res.id != JSON.parse(this.$route.query.obj).gids[i]
            );
          }
        } else {
          this.cart.giftList = this.cart.giftList.filter(
            (res) => res.id != JSON.parse(this.$route.query.obj).gids[i]
          );
        }
      }

      localStorage.setItem(
        "cart",
        JSON.stringify({
          goodList: this.cart.goodList,
          giftList: this.cart.giftList,
        })
      );
    },
    addCheck(e) {
      this.table.goodsList.forEach((item) => {
        if (this.obj.isFp == 1) {
          item.checkQuantity = item.realTimeQuantityCopy;
          item.checkerId = item.checkerId;
          item.differNumber = item.realTimeQuantityCopy - item.realTimeQuantity;
          item.quantity = item.realTimeQuantity;
          item.goodsType = item.gtype;
        } else {
          item.checkQuantity = null;
          item.checkerId = null;
          item.differNumber = null;
          item.goodsId = item.id;
        }
        let tempArray = [];
        if (item.warehouses) {
          item.warehouses.forEach((res) => {
            item.quantity += res.number;
            if (!res.type) {
              tempArray.push(Number(res.warId));
            }
          });
        }
        item.wars = tempArray;
      });
      let flag = false;
      if (this.obj.isFp == 1) {
        this.table.goodsList.forEach((item) => {
          if (item.checkerId) {
            flag = true;
          }
        });
      }
      this.axios
        .post("/order/stockControl/addCheck", {
          comment: "",
          flow: e,
          goodsList: this.table.goodsList,
          goodsType: JSON.parse(this.$route.query.obj).gType,
          oddNumber: this.table.oddNumber,
          type: this.obj.isFp == 1 ? "2" : "1",
          goodsType:
            this.obj.isFp == 1
              ? this.table.goodsList[0].goodsType
              : this.obj.gType,
        })
        .then((res) => {
          if (res.code == 0) {
            if (this.obj.isFp != 1) {
              this.moreDelect();
            }
            this.$router.replace({
              path: "checkList",
              query: {
                isLoad: true,
              },
            });
            this.$store.commit("clearToolItem", "/checkFillIn");
            this.$message.success("提交成功");
          } else {
            this.$message.error(res.message);
          }
        });
    },
  },
  computed: {
    cGoodName() {
      let str = "";
      this.selectArray.forEach((res) => {
        str += res.title + " ";
      });
      return str;
    },
    inventoryCount() {
      return function (row) {
        let obj = this.$route.query.obj
          ? JSON.parse(this.$route.query.obj)
          : null;
        let count = 0;
        if (obj && obj.isFp == 1) {
          return row.realTimeQuantity;
        } else {
          if (row.warehouses) {
            row.warehouses.forEach((currentTemp) => {
              if (!currentTemp.type) {
                count += currentTemp.number;
              }
            });
          }
        }
        return count;
      };
    },
  },
};
</script>

<style lang="scss" scope>
.content {
  /deep/.el-bread-one .el-breadcrumb__inner {
    font-size: 15px;
    color: #4168e7;
  }
  .submit {
    background: #fff;
    padding: 10px;
    width: 99%;
    text-align: right;
    border-radius: 5px;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
  }
  .context {
    display: flex;
    width: 100%;
    height: 95%;
    margin-top: 20px;
    justify-content: space-between;
    min-width: 800px;
    min-height: 600px;
    .left {
      overflow: auto;
      height: 100%;
      width: 59%;
      background: #fff;
      border-radius: 10px;
      padding: 10px 20px;
      box-sizing: border-box;
      .top {
        border-bottom: 2px solid #d9d9d9;
        padding: 10px 0px;
        font-size: 18px;
        color: #606060;
        line-height: 25px;
      }
      .tableBorder {
        border: 1px solid #d9d9d9;
        margin-top: 10px;
        .title {
          display: flex;
          flex-wrap: nowrap;
          justify-content: space-between;
          border-bottom: 1px solid #d9d9d9;
          font-size: 14px;
          padding: 10px 10px;
        }
      }
    }
    .right {
      width: 40%;
      height: 100%;
      border-radius: 10px;
      background: #fff;
      padding: 10px 20px;
      box-sizing: border-box;
      color: #333333;

      .title {
        display: flex;
        justify-content: space-between;
        border-bottom: 2px solid #d9d9d9;
        padding: 10px 0px;
        margin-bottom: 5px;
      }
      .nodate {
        text-align: center;
        padding: 10px 0;
        img {
          width: 120px;
          height: 120px;
          display: block;
          margin: 0 auto;
        }
        span {
          font-size: 14px;
          color: #999;
          display: inline;
          margin-top: 10px;
        }
      }
    }
  }
}
</style>
